<template>
  <div class="Attendances">
    <!-- 头部 -->
    <div class="head">
      <div class="employee">
        <i class="el-icon-info">员工管理</i>
      </div>
      <div class="btn">
        <el-button size="mini" type="primary">新增</el-button>
        <el-button size="mini" type="primary" @click="addExcel">导入</el-button>
      </div>
    </div>

    <el-card>
      <el-tabs type="border-card" border>
        <el-table :data="employeeInfo" style="width: 100%">
          <!-- 序号 -->
          <el-table-column label="序号" type="index" width="120" />

          <!-- 姓名 -->
          <el-table-column label="姓名" width="180" prop="username" />

          <!-- 手机号 -->
          <el-table-column label="手机号" width="180" prop="mobile" />

          <!-- 工号 -->
          <el-table-column label="工号" width="180" prop="workNumber" />

          <!-- 聘用形式 -->
          <el-table-column label="聘用形式" width="180">
            <template slot-scope="{ row }">
              {{ row.formOfEmployment | myEmploy }}
            </template>
          </el-table-column>

          <!-- 部门 -->
          <el-table-column label="部门" width="180" prop="departmentName" />

          <!-- 入职时间 -->
          <el-table-column label="入职时间" width="180" prop="correctionTime" />

          <!-- 操作 -->
          <el-table-column label="操作" width="280">
            <template slot-scope="{ row }">
              <el-button type="text" @click="particularsInfo(row)">
                查看
              </el-button>
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text">离职</el-button>
              <el-button type="text" @click="del(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tabs>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script lang="js">
// 导入枚举文件
import myData from '@/api/constant/employees.js'
import {
  // 获取员工列表
  getSimpleListApi,
  // 根据ID更新角色
  getDelUserApi
  // 批量导入员工
  // getAddExcelApi
} from '@/api/approvalsApi.js'
export default {
  name: 'Attendances',
  data() {
    return {
      currentPage: 1, // 当前分页
      pageSizes: [5, 10, 15, 20, 30, 50], // 一页多少条数据
      layout: 'total, sizes, prev, pager, next, jumper',
      pageSize: 10, // 初始多少条数据
      page: 1, // 分页
      total: 10, // 总条数,
      hireType: myData.hireType,
      employeeInfo: []
    }
  },
  mounted() {
    this.getSimpleList()
  },
  methods: {
    // 导入 excel 表格
    addExcel() {

    },
    // 删除
    async del(row) {
      const res = await getDelUserApi(row.id)
      this.$message({
        message: res.message,
        type: 'success'
      })
      this.getSimpleList()
    },
    // 查看
    particularsInfo(row) {
      this.$router.push(`/attendances/employeeInfo?id=${row.id}`)
    },
    async getSimpleList() {
      const res = await getSimpleListApi({
        page: this.page,
        size: this.pageSize
      }
      )
      this.employeeInfo = res.data.rows
      this.total = res.data.total
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.getSimpleList()
    },
    handleCurrentChange(page) {
      this.page = page
      this.getSimpleList()
    }
  }
}
</script>

<style lang="scss" scope>
.Attendances {
  margin: 40px 40px;
  .head {
    display: flex;
    line-height: 33px;
    height: 30px;
    justify-content: space-between;
    .employee {
      background-color: #e6f7ff;
      padding: 0 2px;
      font-size: 14px;
    }
    ::before {
      color: #3f9afd;
      margin-right: 5px;
    }
  }
  .el-card.is-always-shadow {
    margin-top: 30px;
  }
  .pagination {
    text-align: center;
    margin-top: 10px;
  }
}
</style>
